<template>
    <view class="coupon-item">
        <view class="top-content">
            <view class="infos">
                <view class="number">{{ couponData.name }}</view>
                <view class="date">{{ computeDate(couponData.valid_end_date) }} 到期</view>
                <view class="place">{{ couponData.use_condit_desc }}</view>
            </view>
            <view class="coupon-values">
                <view class="values" :class="{ available: couponData.isCanUse }">
                    <span>¥</span>
                    <span>{{ couponData.amount }}</span>
                </view>
                <span class="limit">满{{ couponData.satisfy_amount }}可用</span>
            </view>
        </view>
        <view class="bottom-content">
            <view class="rule " :class="{ unfold: unfold }" @click="toggleFold">使用规则</view>
            <view class="btn" @click="useCoupon(couponData)" v-if="couponData.status === 0 && couponData.isCanUse">去使用</view>
            <view class="coupon-status used" v-if="couponData.status === 1"></view>
            <view class="coupon-status overdue" v-if="couponData.status === 2"></view>
        </view>
        <view class="rule-detail" v-if="unfold">
            <view class="" v-for="(item, index) in descList" :key="index">{{ item }}</view>
        </view>
    </view>
</template>
<script>
import { formate } from '@/common/utils.js';
export default {
    name: 'CouponItem',
    data() {
        return {
            unfold: false
        };
    },
    props: {
        couponData: {
            type: Object,
            require: true
        }
    },
    computed: {
        descList() {
            return this.couponData.desc.split('\n');
        }
    },
    methods: {
        toggleFold() {
            this.unfold = !this.unfold;
        },
        // 去使用优惠券
        useCoupon(data) {
            this.$emit('useCoupon', data);
        },
        computeDate(date) {
            let currentTime = new Date();
            let endTime = new Date(date.replace(/-/g, '/'));
            let currentTimestamp = currentTime.getTime();
            let currentDay = currentTime.getDate();
            let endTimestamp = endTime.getTime();
            let endDay = endTime.getDate();
            let endHoursMinutes = formate(endTime.getHours()) + ':' + formate(endTime.getMinutes());
            if (endTimestamp < currentTimestamp > 1000 * 60 * 60 * 24) {
                if (currentDay === endDay) {
                    return '今天 ' + endHoursMinutes;
                } else {
                    return '明日 ' + endHoursMinutes;
                }
            } else {
                return formate(endTime.getFullYear()) + '-' + formate(endTime.getMonth() + 1) + '-' + formate(endDay) + ' ' + endHoursMinutes;
            }
        }
    },
    components: {},
    watch: {
        couponData: {
            handler(newVal, oldVal) {
                this.unfold = (newVal && newVal.unfold) || false;
            },
            deep: true,
            immediate: true
        }
    }
};
</script>
<style lang="scss" scoped="scoped">
.coupon-item {
    padding: 40rpx 40rpx 15rpx;
    background-color: #ffffff;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;

    .top-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        border-bottom: 1rpx solid #e9ebf3;
        padding-bottom: 40rpx;
        .infos {
            font-size: 26rpx;
            line-height: 26rpx;
            .number {
                font-size: 30rpx;
                font-weight: bold;
                line-height: 30rpx;
                margin-bottom: 18rpx;
            }
            .date {
                margin-bottom: 18rpx;
            }
            .place {
                color: #bebebe;
            }
        }
        .coupon-values {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .values {
                span {
                    color: #bebebe;
                    font-size: 44rpx;
                    line-height: 64rpx;
                }
                span:last-child {
                    font-size: 64rpx;
                }
            }
            .available {
                color: #ff4d4d;
            }
            .limit {
                font-size: 26rpx;
                line-height: 30rpx;
                color: #bebebe;
            }
        }
    }
    .bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15rpx;
        font-size: 26rpx;
        line-height: 26rpx;
        .rule {
            color: #bebebe;
            padding-right: 10rpx;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                right: 0;
                top: 50%;
                transform: translate(100%, -50%);
                width: 0;
                height: 0;
                border-left: 14rpx solid transparent;
                border-right: 14rpx solid transparent;
                border-top: 21rpx solid #bebebe;
                border-bottom: none;
            }
        }
        .unfold {
            &::after {
                border-bottom: 21rpx solid #bebebe;
                border-top: none;
            }
        }
        .btn {
            font-size: 24rpx;
            line-height: 24rpx;
            padding: 16rpx 30rpx;
            border-radius: 10rpx;
            background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
            color: #ffffff;
        }
        .coupon-status {
            margin-top: -40rpx;
            width: 98rpx;
            height: 87rpx;
            background-size: cover;
        }
        .used {
            background-image: url(@/pages/indexPages/static/coupon/used.png);
        }
        .overdue {
            background-image: url(@/pages/indexPages/static/coupon/overdue.png);
        }
    }
    .rule-detail {
        padding-top: 20rpx;
        font-size: 26rpx;
        line-height: 40rpx;
        color: #bebebe;
    }
}
</style>
